let arr = [
    "../img/picture1.jpg",
    "../img/picture2.jpg",
    "../img/picture3.jpg",
    "../img/picture4.jpg",
    "../img/picture5.jpg",
];
let arrNum = [];//定时
let n = 0;//数组索引
//左边按钮点击
function toLeft() {
    n--;
    if (n === -1) {
        n = 4;
    }
    let l = document.getElementById("loop");
    l.src = arr[n];
    //l.style.animationPlayState="running";
    /*if (l.style.transform="translateX(0px)"){
        l.style.transform="translateX(400px)"
    }
    if (l.style.transform="translateX(400px)"){
        l.style.transform="translateX(0px)"
    }*/
    let arrLi = document.getElementsByClassName("num-li");
    for (let i = 0; i < arrLi.length; i++) {
        if (i === n) {
            arrLi[i].style.backgroundColor = "red";
            arrLi[i].style.border = "0";
        } else {
            arrLi[i].style.backgroundColor = "rgba(0,0,0,0)";
            arrLi[i].style.border = "2px solid #ffffff";
        }
    }

    let arrArt = document.getElementsByClassName("art");
    for (let m = 0; m < arrArt.length; m++) {
        if (m === n) {
            arrArt[m].style.opacity = "1";
            arrArt[m].style.zIndex = "111";
        } else {
            arrArt[m].style.opacity = "0";
            arrArt[m].style.zIndex = "-111";
        }
    }

}

//右边按钮点击
function toRight() {
    let R = document.getElementById("toRight");
    n++;
    if (n === 5) {
        n = 0;
    }
    let r = document.getElementById("loop");
    r.src = arr[n];
    //span 动
    let arrLi = document.getElementsByClassName("num-li");
    for (let i = 0; i < arrLi.length; i++) {
        if (i === n) {
            arrLi[i].style.backgroundColor = "red";
            arrLi[i].style.border = "0";
        } else {
            arrLi[i].style.backgroundColor = "rgba(0,0,0,0)";
            arrLi[i].style.border = "2px solid #ffffff";
        }
    }
    //文字动
    let arrArt = document.getElementsByClassName("art");
    for (let m = 0; m < arrArt.length; m++) {
        if (m === n) {
            arrArt[m].style.opacity = "1";
            arrArt[m].style.zIndex = "111";
        } else {
            arrArt[m].style.opacity = "0";
            arrArt[m].style.zIndex = "-111";
        }
    }
}

//点击span，切换图片
// let arrOne=[
//     "../img/picture1.jpg",
//     "../img/picture2.jpg",
//     "../img/picture3.jpg",
//     "../img/ww",
//     "../img/picture5.jpg",
// ]
/*
function liOne() {
    let loop=document.getElementById("loop");
    loop.src=arr[0];
    document.getElementsByClassName("num-li")[0].style.backgroundColor = "red";
    document.getElementsByClassName("num-li")[0].style.border = "0";
}*/
window.onload = function () {
    let arrLi = document.getElementsByClassName("num-li");
    let arrArt = document.getElementsByClassName("art");
    for (let i = 0; i < arrLi.length; i++) {
        //(function (id) {
        //当li点击时
        arrLi[i].onclick = function () {
            n = i;
            //切换span
            for (let j = 0; j < arrLi.length; j++) {
                if (j === n) {
                    arrLi[j].style.backgroundColor = "red";
                    arrLi[j].style.border = "0";
                } else {
                    arrLi[j].style.backgroundColor = "rgba(0,0,0,0)";
                    arrLi[j].style.border = "2px solid #ffffff";
                }
            }
            //切换文字
            for (let m = 0; m < arrArt.length; m++) {
                if (m === n) {
                    arrArt[m].style.opacity = "1";
                    arrArt[m].style.zIndex = "111";
                } else {
                    arrArt[m].style.opacity = "0";
                    arrArt[m].style.zIndex = "-111";
                }
            }
            //切换图片
            let image = document.getElementById("loop");
            image.src = arr[n];
        }
        //})(i);
    }
};
//定时函数
function changImage() {
    let image = document.getElementById("loop");
    image.src = arr[n++];
    if (n === 5) {
        n = 0;
    }
    //文字动
    let arrArt = document.getElementsByClassName("art");
    for (let m = 0; m < arrArt.length; m++) {
        if (m === n) {
            arrArt[m].style.opacity = "1";
            arrArt[m].style.zIndex = "111";
        } else {
            arrArt[m].style.opacity = "0";
            arrArt[m].style.zIndex = "-111";
        }
    }
    //span
    let arrLi = document.getElementsByClassName("num-li");
    for (let i = 0; i < arrLi.length; i++) {
        if (i === n) {
            arrLi[i].style.backgroundColor = "red";
            arrLi[i].style.border = "0";
        } else {
            arrLi[i].style.backgroundColor = "rgba(0,0,0,0)";
            arrLi[i].style.border = "2px solid #ffffff";
        }
    }
}

//轮播
function startLoop() {
    for (let i = 0; i < arrNum.length; i++) {
        //清除所有的定时任务
        clearInterval(arrNum[i]);
    }
    //开始
    let num = setInterval("changImage()", 1000);
    arrNum.push(num);
}

//停止
function stopLoop() {
    for (let i = 0; i < arrNum.length; i++) {
        //清除所有的定时任务
        clearInterval(arrNum[i]);
    }
}

startLoop();

